<template>
  <div class="footer">
    <div v-for='(item,index) of items'
         :class='[item.cls,{ on : index === $route.meta.order }]'
         @click="$router.push(item.push)">
      <img :src="index === $route.meta.order ? item.iconSelect : item.icon" alt="">
      <p :class="['colorChange',{ on : index === $route.meta.order }]">{{ item.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "navbar",
  props: ['idx'],
  data() {
    return {
      items: [
        {
          cls: "home",
          name: "首页",
          push: "/home",
          icon: require("@/assets/images/navbar/home.png"),
          iconSelect: require("@/assets/images/navbar/home_selected.png")
        },
        {
          cls: "withdraw",
          name: "提现",
          push: "/withdraw",
          icon: require("@/assets/images/navbar/withdraw.png"),
          iconSelect: require("@/assets/images/navbar/withdraw_selected.png")
        },
        {
          cls: "profile",
          name: "我的",
          push: "/profile",
          icon: require("@/assets/images/navbar/profile.png"),
          iconSelect: require("@/assets/images/navbar/profile_selected.png")
        }
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  z-index: 999;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100vw;
  max-width: 768px;
  box-sizing: border-box;
  height: 50px;
  padding-top: 4px;
  background: #fff;
  box-shadow: 0 -3px 2px 0 rgba(0, 0, 0, 0.02);

  div {
    flex: 1;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
      color: #bfbfbf;
      line-height: 12px;
      letter-spacing: 1px;
      margin: 0;
      padding-left: 2px;

      &.on {
        color: #333;
      }
    }

    img {
      width: 24px;
      height: 24px;
    }
  }
}


</style>
